<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Meme generator</title>
        <script src="jquery.js" type="text/javascript" ></script>
    </head>

    <body>

        <div style="width:40%;margin:30px auto;" >
            <table>
                <tr>
                    <td colspan="2">
                        <img src="testing.jpg" id="gag" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="text" placeholder="Upper Text" id="upperTextbox"/>	
                    </td>
                    <td>
                        <input type="text" placeholder="Lower Text" id="lowerTextbox"/>	
                    </td>
                </tr>
                <tr>
                    <td colspan="2"><p style="font-size:14px;color:#CCC;">Image updates on textbox focus out</p></td>
                </tr>
            </table>
        </div>
        <div id="error"></div>

        <script>


            $('#lowerTextbox').change(function(){
                if($.trim($(this).val()) != "")
                {
                    SendAjaxRequest($('#upperTextbox').val(),$(this).val(),"lower");
                }
            });
            $('#upperTextbox').change(function(){
                if($.trim($(this).val()) != "")
                {
                    SendAjaxRequest($(this).val(),$('#lowerTextbox').val(),"upper");
                }
            });


            function SendAjaxRequest(umsg,dmsg,type)
            {
                $.ajax({
                    url: 'generator.php',
                    type: 'GET',
                    data: { upmsg : umsg, downmsg : dmsg, position: type },
                    success:function(e)
                    {
                        $('#error').html(e);
                        $('#gag').attr('src',e+'?'+ (new Date).getTime());
                    }
                });
            }
        </script>

    </body>
</html>
